<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/lib/layui/css/layui.css" media="all">
</head>
<body>
	<form class="layui-form layui-form-pane" id="ajax_form"  method="post" onsubmit="return false">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategoryId"  lay-filter="topCategoryFilter">
	        <option value="">请选择一级分类</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="secondCategoryId" name="categoryId">
	        <option value="">请选择二级分类</option>
	      </select>
	    </div>
	  </div>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" class="layui-input">
	    </div>
	  </div>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="上架" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
  	  </div>
  	  <div class="layui-form-item" pane="">
  	     <label class="layui-form-label">商品主图</label>
	  	  <div class="layui-upload layui-input-block">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="mainImage" id="mainImgInputId"> 
			    <img class="layui-upload-img" id="mainImgId" width="150px" height="150px">
			    <p id="demoText"></p>
			  <button type="button" class="layui-btn" id="uploadBtnId">上传图片</button>
			  </div>
		  </div> 
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	       <button class="layui-btn" onclick="submitForm()" value="添加">提交</button>
	       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>

	<script src="${path}/static/lib/jquery-1.11.3.js"></script>
	<script src="${path}/static/lib/mylayer.js"></script>
	<script src="${path}/static/lib/util.js"></script>
	<script src="${path}/static/lib/layui/layui.js"></script>
	<script src="${path}/static/lib/kindeditor/kindeditor.js"></script>
	<script src="${path}/static/lib/kindeditor/lang/zh_CN.js"></script>
	<script>
		var form;
		layui.use(['form', 'upload', 'layer'], function(){
		    form = layui.form;
		    var layer = layui.layer;
		    var upload = layui.upload;
		    
		    form.render('select'); //刷新select选择框渲染
		    
		    form.on("select(topCategoryFilter)", function(data) {
		    	console.log(data.elem);// select原始dom对象
		    	console.log(data.value);// 被选中的option的value值
		    	// 根据一级分类加载二级分类
		    	$.ajax({
					url: "${path}/category/selectSecondCategory.action",
					type: "POST",
					dataType: "json",
					data: {"topCategoryId":data.value},
					success: function(jsonObj) {
						console.log(jsonObj);
						$("#secondCategoryId").empty();
						// var data = jsonObj.data;
						$("#secondCategoryId").append("<option value=''>请选择二级分类</option>");
						$(jsonObj.data).each(function(i,value){
							// <option value="001">山东省</option>
							var html = "<option value='"+this.id+"'>"+this.name+"</option>";
							$("#secondCategoryId").append(html);
						});
						
						form.render('select'); //刷新select选择框渲染
					}
				});
		    });
		    
		    
		    
		    //普通图片上传
		    var uploadInst = upload.render({
		      elem: '#uploadBtnId'
		      ,url: '${path}/upload/uploadImg.action'
		      ,before: function(obj){
		        //预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		          $('#mainImgId').attr('src', result); //图片链接（base64）
		        });
		      }
		      ,done: function(res){
		         //如果上传失败
		         if(res.code == util.SUCCESS){
		           //上传成功
		           $('#mainImgInputId').val(res.data);
		         }
		      }
		      ,error: function(){
		        //演示失败状态，并实现重传
		        var demoText = $('#demoText');
		        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		        demoText.find('.demo-reload').on('click', function(){
		          uploadInst.upload();
		        });
		      }
		    });
		  
		});
		
		$(function() {
			// 加载一级分类
			$.ajax({
				url: "${path}/category/selectTopCategory.action",
				type: "POST",
				dataType: "json",
				success: function(jsonObj) {
					console.log(jsonObj);
					// var data = jsonObj.data;
					$(jsonObj.data).each(function(i,value){
						// <option value="001">山东省</option>
						var html = "<option value='"+this.id+"'>"+this.name+"</option>";
						$("#topCategoryId").append(html);
					});
					
					form.render('select'); //刷新select选择框渲染
				}
			});
		});
		
		function submitForm() {
			$.ajax({
				url : "${path}/product/insert.action",
				type : "post",
				dataType : "json",
				data : $("#ajax_form").serialize(),
				success : function(jsonObj) {
					console.log(jsonObj);
					if(jsonObj.code == util.SUCCESS) {
						mylayer.successMsg(jsonObj.msg);
						//当你在iframe页面关闭自身时
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						setTimeout(function(){
							parent.layer.close(index); //再执行关闭 
							// 刷新父页面
							window.parent.location.reload();
						},1000);
					} else {
						mylayer.errorMsg(jsonObj.msg);
					}
					
				}
			});
		}
		
		var myKindEditor ;
        KindEditor.ready(function(K) {
            var kingEditorParams = {
                 //指定上传文件参数名称
                 filePostName  : "file",
                 //指定上传文件请求的url。
                 uploadJson : '${path}/product/uploadImgByEditor.action',
                 //上传类型，分别为image、flash、media、file
                 dir : "image",
                 afterBlur: function () { this.sync(); }
           }
           var editor = K.editor(kingEditorParams);
           
          //富文本编辑器
          myKindEditor = KindEditor.create('#ajax_form[name=detail]', kingEditorParams);
        });
</script>
</body>
</html>